<template>
  <div>
    <!-- 导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/scheduling' }">医生排班管理</el-breadcrumb-item>
      <el-breadcrumb-item>设置排班规则</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :span="3">
        <el-button type="warning" @click="toScheduling">
          <i class="el-icon-back"></i>返回
        </el-button>
      </el-col>
      <el-col :span="4" :offset="4">
        <el-button type="primary" @click="showInsertDialog">添加新的排序规则</el-button>
      </el-col>
      <el-col :span="3" style="margin-left:1%">
        <el-button type="danger" @click="deleteSelection('RuleFormRef')">批量删除</el-button>
      </el-col>
      <el-col :span="3">
        <el-button type="danger" @click="deleteRuleShow = true" plain>按规则名称删除</el-button>
      </el-col>
    </el-row>
    <!-- 查询栏 -->
    <el-form
      ref="RuleSearchFormRef"
      :model="RuleSearchForm"
      label-width="100px"
      :inline="true"
      class="demo-form-inline"
      style="margin-left:10%"
    >
      <el-form-item label="排序规则名称">
        <el-input placeholder="请输入内容" v-model="RuleSearchForm.rulename" clearable></el-input>
      </el-form-item>
      <el-form-item label="选择科室">
        <el-select v-model="RuleSearchForm.deptid" placeholder="空" filterable>
          <el-option label="空" :value="null"></el-option>
          <el-option
            v-for="item in DepartmentArray"
            :key="item.id"
            :label="item.deptname"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left:4%">
        <el-button type="success" @click="searchRuleList(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 排班规则列表展示 -->
    <el-table
      ref="RuleFormRef"
      :data="ruleListArray"
      tooltip-effect="dark"
      border
      style="width: 80%;margin-left:10%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="排序规则名称" prop="rulename" sortable></el-table-column>
      <el-table-column prop="deptid" label="科室" sortable>
        <template slot-scope="scope">
          <div v-if="scope.row.department!=null">{{ scope.row.department.deptname }}</div>
          <div v-else>无</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-search" plain @click="showRule(scope.row)" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" @click="deleteRule(scope.row)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <div class="block" style="margin-top:1rem;margin-left:20%">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="pageInfo.total"
        :current-page="pageInfo.pageNum"
        :page-sizes="[8,16,32,50,100]"
        :page-size="pageInfo.pageSize"
        layout=" prev, pager, next, jumper,total, sizes"
      ></el-pagination>
    </div>
    <!-- 按规则名称删除信息弹窗 -->
    <el-dialog title=" 按规则名称删除排班规则" :visible.sync="deleteRuleShow" width="30%" center status-icon>
      <el-form
        ref="deleteRuleFormRef"
        :model="deleteRulename"
        :rules="GlobalFormrules"
        label-width="20%"
        label-position="left"
      >
        <el-form-item label="规则名称" prop="deletename">
          <el-input placeholder="请输入内容" v-model="deleteRulename.deletename" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="deleteByrulename('deleteRuleFormRef')">确认删除</el-button>
        <el-button @click="deleteRuleShow = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 查看排班规则详细信息弹窗 -->
    <el-dialog
      title="排班规则详情"
      :visible.sync="oneRuleShow"
      width="68%"
      center
      class="checkbox-div"
      :lock-scroll="true"
      @close="closeRuleShowDialog"
      :append-to-body="true"
    >
      <el-tag type="success" style="margin-left:0%">规则名称：{{show_rulename}}</el-tag>
      <el-tag type="warning">部门名称：{{show_deptname}}</el-tag>
      <el-table :data="RuleDetailShow" height="300" border>
        <el-table-column fixed prop="user.realname" label="姓名"></el-table-column>
        <el-table-column label="星期一" width="60px">
          <el-table-column prop="weekdetail[0].morning" label="上午" width="55%">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                true-label="1"
                false-label="0"
                v-model="scope.row.weekdetail[0].morning"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="weekdetail[0].afternoon" label="下午" width="55%">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                true-label="1"
                false-label="0"
                v-model="scope.row.weekdetail[0].afternoon"
              ></el-checkbox>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="星期二">
          <el-table-column prop="weekdetail[0].morning" label="上午" width="55%">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                true-label="1"
                false-label="0"
                v-model="scope.row.weekdetail[1].morning"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="weekdetail[0].afternoon" label="下午" width="55%">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                true-label="1"
                false-label="0"
                v-model="scope.row.weekdetail[1].afternoon"
              ></el-checkbox>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="星期三">
          <el-table-column prop="weekdetail[0].morning" label="上午" width="55%">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                true-label="1"
                false-label="0"
                v-model="scope.row.weekdetail[2].morning"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="weekdetail[0].afternoon" label="下午" width="55%">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                true-label="1"
                false-label="0"
                v-model="scope.row.weekdetail[2].afternoon"
              ></el-checkbox>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="星期四">
          <el-table-column prop="weekdetail[0].morning" label="上午" width="55%">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                true-label="1"
                false-label="0"
                v-model="scope.row.weekdetail[3].morning"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="weekdetail[0].afternoon" label="下午" width="55%">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                true-label="1"
                false-label="0"
                v-model="scope.row.weekdetail[3].afternoon"
              ></el-checkbox>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="星期五">
          <el-table-column prop="weekdetail[0].morning" label="上午" width="55%">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                true-label="1"
                false-label="0"
                v-model="scope.row.weekdetail[4].morning"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="weekdetail[0].afternoon" label="下午" width="55%">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                true-label="1"
                false-label="0"
                v-model="scope.row.weekdetail[4].afternoon"
              ></el-checkbox>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="星期六">
          <el-table-column prop="weekdetail[0].morning" label="上午" width="55%">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                true-label="1"
                false-label="0"
                v-model="scope.row.weekdetail[5].morning"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="weekdetail[0].afternoon" label="下午" width="55%">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                true-label="1"
                false-label="0"
                v-model="scope.row.weekdetail[5].afternoon"
              ></el-checkbox>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="星期日">
          <el-table-column prop="weekdetail[0].morning" label="上午" width="55%">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                true-label="1"
                false-label="0"
                v-model="scope.row.weekdetail[6].morning"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="weekdetail[0].afternoon" label="下午" width="55%">
            <template slot-scope="scope">
              <el-checkbox
                disabled
                true-label="1"
                false-label="0"
                v-model="scope.row.weekdetail[6].afternoon"
              ></el-checkbox>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- 分页条 -->
      <div class="block" style="margin-top:1rem">
        <el-pagination
          background
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :total="pageInfo1.total"
          :current-page="pageInfo1.pageNum"
          :page-sizes="[8,16,32,50,100]"
          :page-size="pageInfo1.pageSize"
          layout=" prev, pager, next, jumper,total, sizes"
        ></el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="oneRuleShow = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 添加排班规则信息弹窗 -->
    <el-dialog
      title="添加排班规则"
      :visible.sync="createRuleShow"
      width="68%"
      @close="closeRuleInsertDialog"
      center
      :lock-scroll="true"
      status-icon
      :append-to-body="true"
    >
      <el-form
        ref="RuleInsertFormRef"
        :model="RuleInsertSearchForm"
        :rules="GlobalFormrules"
        :inline="true"
        label-position="left"
      >
        <el-col :span="9" :offset="1">
          <el-form-item label="选择科室">
            <el-select v-model="RuleInsertSearchForm.deptid" filterable style="width:80%">
              <el-option label="空" :value="null"></el-option>
              <el-option
                v-for="item in DepartmentArray"
                :key="item.id"
                :label="item.deptname"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="挂号级别">
            <el-select v-model="RuleInsertSearchForm.registleid" filterable style="width:80%">
              <el-option label="空" :value="null"></el-option>
              <el-option
                v-for="item in RegistlevelArray"
                :key="item.id"
                :label="item.registname"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button style="margin-left:5%" type="primary" @click="searchUserList(1)">查询</el-button>
          </el-form-item>
        </el-col>
        <el-table :data="UserData" style="width: 120%" height="300" border>
          <el-table-column prop="realname" label="真实姓名" sortable></el-table-column>
          <el-table-column label="所在科室">
            <template slot-scope="scope">{{ scope.row.department.deptname }}</template>
          </el-table-column>
          <el-table-column label="挂号级别">
            <template slot-scope="scope">
              <div v-if="scope.row.registlevel!=null">{{ scope.row.registlevel.registname }}</div>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column label="星期一" width="60px">
            <el-table-column prop="weekdetail[0]" label="上午" width="55%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  checked
                  v-if="scope.row.weekdetail[0]=='1'"
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,0)"
                ></el-checkbox>
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  v-else
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,0)"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="weekdetail[1]" label="下午" width="55%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  checked
                  v-if="scope.row.weekdetail[1]=='1'"
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,1)"
                ></el-checkbox>
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  v-else
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,1)"
                ></el-checkbox>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="星期二" width="60px">
            <el-table-column prop="weekdetail[2]" label="上午" width="55%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  checked
                  v-if="scope.row.weekdetail[2]=='1'"
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,2)"
                ></el-checkbox>
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  v-else
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,2)"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="weekdetail[3]" label="下午" width="55%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  checked
                  v-if="scope.row.weekdetail[3]=='1'"
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,3)"
                ></el-checkbox>
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  v-else
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,3)"
                ></el-checkbox>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="星期三" width="60px">
            <el-table-column prop="weekdetail[4]" label="上午" width="55%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  checked
                  v-if="scope.row.weekdetail[4]=='1'"
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,4)"
                ></el-checkbox>
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  v-else
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,4)"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="weekdetail[5]" label="下午" width="55%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  checked
                  v-if="scope.row.weekdetail[5]=='1'"
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,5)"
                ></el-checkbox>
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  v-else
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,5)"
                ></el-checkbox>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="星期四" width="60px">
            <el-table-column prop="weekdetail[6]" label="上午" width="55%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  checked
                  v-if="scope.row.weekdetail[6]=='1'"
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,6)"
                ></el-checkbox>
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  v-else
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,6)"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="weekdetail[7]" label="下午" width="55%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  checked
                  v-if="scope.row.weekdetail[7]=='1'"
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,7)"
                ></el-checkbox>
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  v-else
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,7)"
                ></el-checkbox>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="星期五" width="60px">
            <el-table-column prop="weekdetail[8]" label="上午" width="55%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  checked
                  v-if="scope.row.weekdetail[8]=='1'"
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,8)"
                ></el-checkbox>
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  v-else
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,8)"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="weekdetail[9]" label="下午" width="55%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  checked
                  v-if="scope.row.weekdetail[9]=='1'"
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,9)"
                ></el-checkbox>
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  v-else
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,9)"
                ></el-checkbox>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="星期六" width="60px">
            <el-table-column prop="weekdetail[10]" label="上午" width="55%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  checked
                  v-if="scope.row.weekdetail[10]=='1'"
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,10)"
                ></el-checkbox>
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  v-else
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,10)"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="weekdetail[11]" label="下午" width="55%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  checked
                  v-if="scope.row.weekdetail[11]=='1'"
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,11)"
                ></el-checkbox>
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  v-else
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,11)"
                ></el-checkbox>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="星期天" width="60px">
            <el-table-column prop="weekdetail[12]" label="上午" width="55%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  checked
                  v-if="scope.row.weekdetail[12]=='1'"
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,12)"
                ></el-checkbox>
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  v-else
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,12)"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="weekdetail[13]" label="下午" width="55%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  checked
                  v-if="scope.row.weekdetail[13]=='1'"
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,13)"
                ></el-checkbox>
                <el-checkbox
                  true-label="1"
                  false-label="0"
                  v-else
                  :key="(new Date()).getTime()"
                  @change="checked=>saveSelectedStatus(checked,scope.row,scope.$index,13)"
                ></el-checkbox>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <el-row>
          <!-- 分页条 -->
          <div class="block" style="margin-top:1rem;margin-left:20%">
            <el-pagination
              background
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :total="pageInfo2.total"
              :current-page="pageInfo2.pageNum"
              :page-sizes="[8,16,32,50]"
              :page-size="pageInfo2.pageSize"
              layout=" prev, pager, next, jumper,total, sizes"
            ></el-pagination>
          </div>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="8">
            <el-form-item label="规则名称" prop="rulename">
              <el-input placeholder="空" v-model="RuleInsertSearchForm.rulename" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveCreateRule('RuleInsertFormRef')">添加新规则</el-button>
        <el-button @click="createRuleShow = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    //删除时规则名验证
    var validdeletename = async (rule, value, callback) => {
      let queryname = this.deleteRulename.deletename;
      let querydeptid = null;
      const {
        data: res,
      } = await this.$http.post("rule/findValidRulenameDeptid", {
        rulename: queryname,
        deptid: querydeptid,
      });
      if (res.meta.status !== 200) {
        callback(new Error("规则名不存在"));
      }

      callback();
    };
    //添加时规则名验证
    var validcreatename = async (rule, value, callback) => {
      let queryname = this.RuleInsertSearchForm.rulename;
      let querydeptid = this.RuleInsertSearchForm.deptid;

      const {
        data: res,
      } = await this.$http.post("rule/findsaveValidRulenameDeptid", {
        rulename: queryname,
        deptid: querydeptid,
      });
      if (res.meta.status !== 200) {
        callback(new Error("该科室下存在此规则名"));
      }

      callback();
    };
    return {
      //创建新规则弹窗显示
      createRuleShow: false,
      // 按规则名删除弹窗显示
      deleteRuleShow: false,
      //查看规则详细弹窗显示
      oneRuleShow: false,
      // 按规则名称删除对象
      deleteRulename: {
        deletename: "",
      },
      //验证规则
      GlobalFormrules: {
        deletename: [
          { required: true, message: "请输入规则名", trigger: "blur" },
          {
            min: 2,
            max: 64,
            message: "长度在 2 到 64 个字符",
            trigger: "blur",
          },
          { validator: validdeletename, trigger: "blur" },
        ],
        rulename: [
          { required: true, message: "请输入规则名", trigger: "blur" },
          {
            min: 2,
            max: 64,
            message: "长度在 2 到 64 个字符",
            trigger: "blur",
          },
          { validator: validcreatename, trigger: "blur" },
        ],
      },

      flag: true,
      form: {},
      deptid: {},
      //条件查询对象
      RuleSearchForm: {
        rulename: "",
        deptid: null,
      },
      //显示规则详情对象
      RuleDetailShow: [
        {
          userrealname: "",
        },
      ],
      show_rulename: "",
      show_deptname: "",
      show_deptid: null,
      //添加规则查询对象
      RuleInsertSearchForm: {
        deptid: null,
        registleid: null,
        rulename: "",
        isscheduling: "是",
        //条件改变判断数据
        deptid_copy: null,
      },
      // 排班规则列表
      ruleListArray: [],
      // 门诊科室列表
      DepartmentArray: [],
      // 挂号级别列表
      RegistlevelArray: [],
      // 添加时用户信息
      UserData: [],
      // 页面信息
      pageInfo: {
        pageNum: 1,
        pageSize: 8,
        total: 0,
      },
      // 页面信息_查看详情
      pageInfo1: {
        pageNum: 1,
        pageSize: 8,
        total: 0,
      },
      // 页面信息_添加规则
      pageInfo2: {
        pageNum: 1,
        pageSize: 8,
        total: 0,
      },
      // 生成排班规则选取时间
      DateArray1: null,
     
      //日期快捷键
      pickerOptions1: {
        shortcuts: [
          {
            text: "下一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "今天至月末",
            onClick(picker) {
              var now = new Date(); //当前日期
              var nowMonth = now.getMonth(); //当前月
              var nowYear = now.getYear(); //当前年
              nowYear += nowYear < 2000 ? 1900 : 0;
              var monthStartDate = new Date(nowYear, nowMonth, 1);
              var monthEndDate = new Date(nowYear, nowMonth + 1, 1);
              var days =
                (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
              const EndDate = new Date(nowYear, nowMonth, days);
              const start = new Date();
              picker.$emit("pick", [start, EndDate]);
            },
          },
          {
            text: "下一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 多选数组
      multipleSelection: [],
      //加载动画
      loading: true,
    };
  },
  created() {
    // 查询排班规则列表
    this.searchRuleList();
    // 查询科室列表
    this.searchDepartmentList();
    //  查询挂号级别列表
    this.searchRegistlevelList();
  },
  methods: {
    //返回排班管理
    toScheduling() {
      this.$router.push("/scheduling");
    },
    // 查询排班规则信息
    async searchRuleList(pnum) {
      if (pnum != null) {
        this.pageInfo.pageNum = pnum;
      }
      const { data: res } = await this.$http.post(
        "rule/findAllByConditionByPage",
        {
          rulename: this.RuleSearchForm.rulename,
          deptid: this.RuleSearchForm.deptid,
          pageNum: this.pageInfo.pageNum,
          pageSize: this.pageInfo.pageSize,
        }
      );
      if (res.meta.status !== 200) {
        return this.$message.error("获取排班规则列表失败");
      }
      this.ruleListArray = res.info.list;
      this.pageInfo.pageNum = res.info.pageNum;
      this.pageInfo.pageSize = res.info.pageSize;
      this.pageInfo.total = res.info.total;
      console.log(this.ruleListArray);
    },

    //查询科室列表
    async searchDepartmentList() {
      const {
        data: res,
      } = await this.$http.post("department/findAllDepartmentByCondition", {
        id: 1,
      });
      if (res.meta.status !== 200) {
        return this.$message.error("获取科室列表失败");
      }
      this.DepartmentArray = res.list;
      // console.log(res);
    },
    //查询挂号类别列表
    async searchRegistlevelList() {
      const {
        data: res,
      } = await this.$http.post("registlevel/findAllRegistlevel", { id: null });
      if (res.meta.status !== 200) {
        return this.$message.error("获取挂号级别列表失败");
      }
      this.RegistlevelArray = res.list;
      // console.log(res);
    },
    //展开添加规则弹窗
    showInsertDialog() {
      this.searchUserList();
      this.createRuleShow = true;
    },

    //提交添加规则
    saveCreateRule(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          //添加规则验证是否符合规范
          const { data: res } = await this.$http.post("user/listUsers", {
            deptid: this.RuleInsertSearchForm.deptid,
            isscheduling: this.RuleInsertSearchForm.isscheduling,
          });
          if (res.meta.status !== 200) {
            this.$message.error("获取用户列表失败");
            return false;
          }
          //临时数据_用户列表
          let TempUserArray = res.list;
          let TempSubmitUserArray = [];
          let num = 0;
          for (let i = 0; i < TempUserArray.length; i++) {
            //数据对拷
            let TempUser = TempUserArray[i];
            let weektemp = this.$getLocalStorage(TempUser.id);
            if (weektemp != null) {
              let j = 0;
              for (j; j < 14; j++) {
                if (weektemp[j] == "1") {
                  break;
                }
              }
              //如果有排班情况
              if (j != 14) {
                TempSubmitUserArray[num] = TempUserArray[i];
                TempSubmitUserArray[num++].weekdetail = weektemp;
              }
            }
          }
          //验证是否每天上下午都有人值班
          let flag = 0; //判断最终是否为 14
          //游标
          for (let i = 0; i < 14; i++) {
            for (let j = 0; j < TempSubmitUserArray.length; j++) {
              let weekArray = TempSubmitUserArray[j].weekdetail;
              if (weekArray[i] == "1") {
                flag++;
                break;
              }
            }
          }
          if (flag != 14) {
            this.$message.error("每天上下午都需要有人值班");
            return false;
          }
          //添加到rule中
          console.log(TempSubmitUserArray);
          const { data: response } = await this.$http.post(
            "rule/saveRuleList",
            {
              userList: TempSubmitUserArray,
              rulename: this.RuleInsertSearchForm.rulename,
            }
          );
          if (response.meta.status !== 200) {
            this.$message.error("获取用户列表失败");
            return false;
          }

          this.searchRuleList(1);
          this.createRuleShow = false;
          this.pageInfo2.pageNum = 1;
          this.$message.success("添加新规则成功");
          this.$clearLocalStorage();
        } else {
          this.$message.error("验证失败");
          return false;
        }
      });
    },
    //添加时取消弹窗
    closeRuleInsertDialog() {
      this.pageInfo2.pageNum = 1;
      this.$clearLocalStorage();
      this.createRuleShow = false;
      this.RuleInsertSearchForm.deptid = null;
      this.RuleInsertSearchForm.registleid = null;
      this.RuleInsertSearchForm.rulename = "";
      this.RuleInsertSearchForm.deptid_copy = null;
    },
    //添加时查询用户信息列表
    async searchUserList(pnum) {
      if (pnum != null) {
        this.pageInfo2.pageNum = pnum;
      }
      const { data: res } = await this.$http.post("user/listUsers", {
        deptid: this.RuleInsertSearchForm.deptid,
        registleid: this.RuleInsertSearchForm.registleid,
        isscheduling: this.RuleInsertSearchForm.isscheduling,
        pageNum: this.pageInfo2.pageNum,
        pageSize: this.pageInfo2.pageSize,
      });
      if (res.meta.status !== 200) {
        return this.$message.error("获取用户列表失败");
      }
      //如果查询条件改变 清空LocalStorage
      if (
        this.RuleInsertSearchForm.deptid !=
        this.RuleInsertSearchForm.deptid_copy
      ) {
        this.$clearLocalStorage();
      }
      // 状态保持
      this.RuleInsertSearchForm.deptid_copy = this.RuleInsertSearchForm.deptid;

      // 数据传输
      this.UserData = res.info.list;
      //数组初始化 备份在本地存储
      for (let item of this.UserData) {
        item.weekdetail = new Array();
        if (this.$getLocalStorage(item.id) != null) {
          item.weekdetail = this.$getLocalStorage(item.id);
        } else {
          for (let i = 0; i < 14; i++) {
            item.weekdetail[i] = "0";
          }
          this.$setLocalStorage(item.id, item.weekdetail);
        }
      }
      this.pageInfo2.pageNum = res.info.pageNum;
      this.pageInfo2.pageSize = res.info.pageSize;
      this.pageInfo2.total = res.info.total;

      console.log(this.UserData);
      // Vue.nextTick({
      //   //this.$ref.xxx.select
      // })
      //this.$set(this.$refs.elTable.$data.tableData,index,row);
      //console.log(res);
    },
    //添加时选择状态保持
    saveSelectedStatus(checked, row, index, num) {
      row.weekdetail[num] = checked;
      this.$setLocalStorage(row.id, row.weekdetail);

      //console.log(this.$getLocalStorage(row.id))
    },
    //查看一个规则信息
    async showRule(row) {
      //  this.startLoading();
      //  setTimeout(this.endLoading(),1000)
      const { data: res } = await this.$http.post("rule/findRuleByCondition", {
        rulename: row.rulename,
        deptid: row.deptid,
        pageNum: this.pageInfo1.pageNum,
        pageSize: this.pageInfo1.pageSize,
      });
      if (res.meta.status !== 200) {
        return this.$message.error("获取规则详情失败");
      }
      //详情
      this.RuleDetailShow = res.info.list;
      this.show_rulename = res.info.list[0].rulename;
      this.show_deptname = res.info.list[0].department.deptname;
      this.show_deptid = res.info.list[0].department.id;

      this.pageInfo1.pageNum = res.info.pageNum;
      this.pageInfo1.pageSize = res.info.pageSize;
      this.pageInfo1.total = res.info.total;

      this.oneRuleShow = true;
      console.log(res.info.list);
    },
    //查看规则弹窗关闭
    closeRuleShowDialog() {
      this.pageInfo1.pageNum = 1;
      this.oneRuleShow = false;
    },
    //删除一个用户
    deleteRule(row) {
      this.$confirm("此操作将删除该规则信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
          const { data: res } = await this.$http.post(
            "rule/deleteRuleByRulenameByDeptid",
            {
              rulename: row.rulename,
              deptid: row.deptid,
            }
          );
          if (res.meta.status !== 200) {
            return this.$message.error("删除规则失败");
          }
          this.searchRuleList();
          this.$message({
            type: "success",
            message: "删除规则成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量删除选中的规则信息
    deleteSelection(formname) {
      if (this.multipleSelection.length == 0) {
        this.$message.info("请选中一行或多行数据");
        return;
      }
      this.$confirm("此操作将删除您选中的规则信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
          const { data: res } = await this.$http.post("rule/deleteRulesBatch", {
            ruleArray: this.multipleSelection,
          });
          if (res.meta.status !== 200) {
            return this.$message.error("删除失败");
          }
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.pageInfo.pageNum = 1;
          this.searchRuleList();
          this.multipleSelection = [];
          this.$refs[formname].clearSelection();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 按规则名称删除
    deleteByrulename(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm(
            "此操作将删除该规则名称下的排班规则信息, 是否继续?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "error",
            }
          )
            .then(async () => {
              const { data: res } = await this.$http.post(
                "rule/deleteRuleByRulename",
                {
                  rulename: this.deleteRulename.deletename,
                }
              );
              if (res.meta.status !== 200) {
                return this.$message.error("删除规则失败");
              }
              this.deleteRulename.deletename = "";
              this.pageInfo.pageNum = 1;
              this.deleteRuleShow = false;
              this.$message({
                type: "success",
                message: "删除规则成功",
              });
              this.deleteRulename.deletename = "";
              this.searchRuleList(1);
              return;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        } else {
          this.$message.error("验证失败");
          return false;
        }
      });
    },
    //多选选中项目行
    handleSelectionChange(val) {
      //拷贝数据，不拷贝引用
      let temp = Object.assign({}, val);
      temp.user = null;
      this.multipleSelection = [];
      for (let index in val) {
        this.multipleSelection[index] = temp[index];
      }

      //console.log(this.multipleSelection)
    },
    //分页函数 查询条数改变
    handleSizeChange(size) {
      this.pageInfo.pageNum = 1;
      this.pageInfo.pageSize = size;
      this.searchRuleList();
    },
    //分页函数 查询页数改变
    handleCurrentChange(page) {
      this.pageInfo.pageNum = page;
      this.searchRuleList();
    },
    //分页函数_查看详情 查询条数改变
    handleSizeChange1(size) {
      this.pageInfo1.pageNum = 1;
      this.pageInfo1.pageSize = size;
      let row = {
        rulename: this.show_rulename,
        deptid: this.show_deptid,
      };
      this.showRule(row);
    },
    //分页函数_查看详情 查询页数改变
    handleCurrentChange1(page) {
      this.pageInfo1.pageNum = page;
      let row = {
        rulename: this.show_rulename,
        deptid: this.show_deptid,
      };
      this.showRule(row);
    },
    //分页函数_添加 查询条数改变
    handleSizeChange2(size) {
      this.pageInfo2.pageNum = 1;
      this.pageInfo2.pageSize = size;
      this.searchUserList(1);
    },
    //分页函数_添加 查询页数改变
    handleCurrentChange2(page) {
      this.pageInfo2.pageNum = page;
      this.searchUserList();
    },

    // Loading
    startLoading: function () {
      this.loading = this.$loading.service({
        lock: true,
        text: "加载中……",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    endLoading: function () {
      this.loading.close();
    },
  },
  computed: {},
};
</script>
<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
//---表格文本居中---
/deep/.el-table th > .cell {
  text-align: center;
}
/deep/.el-table .cell {
  text-align: center;
}
//---表格文本居中---
//checkbox选中后样式
.checkbox-div {
  // 未选中样式
  /deep/ .el-checkbox__inner {
    border-radius: 0;
    background-color: #a8a8a8;
  }
  /deep/ .el-checkbox {
    color: #a8a8a8;
  }
  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #409eff;
  }
  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
    // 选中后样式
    background-color: #409eff;
    // border-color: #409EFF;
  }
  // 加未选中的 对号 css
  .unselected .el-checkbox__input .el-checkbox__inner::after {
    // ::after {
    // 对号
    border: 2px solid red;
    // 不覆盖下面的 会 导致对号变形
    box-sizing: content-box;
    content: "";
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 3px;
    position: absolute;
    top: 1px;
    width: 3px;
    // }
  }
  /deep/ .el-checkbox__input .el-checkbox__inner::after {
    // 对号
    border: 2px solid #fff;
    // 不覆盖下面的 会 导致对号变形
    box-sizing: content-box;
    content: "";
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 3px;
    position: absolute;
    top: 1px;
    width: 3px;
    //
    transform: rotate(45deg) scaleY(1);
  }
}
</style>

